//3-1 宽巷UPD
(function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('mtable3-1'));

    // 定义数据
    var dataBDS = [-0.345, 0.678, -0.901, 0.234, -0.567, 0.890, -0.123, 0.456, -0.789, 0.012];
    var dataGPS = [0.567, -0.890, 0.123, -0.456, 0.789, -0.012, 0.345, -0.678, 0.901, -0.234];
    var dataGLO = [-0.789, 0.012, -0.345, 0.678, -0.901, 0.234, -0.567, 0.890, -0.123, 0.456];
    var dataGAL = [0.234, -0.567, 0.890, -0.123, 0.456, -0.789, 0.012, 0.567, -0.890, 0.123];

    // X 轴数据
    var xAxisDataBDS = ['c01', 'c02', 'c03', 'c04', 'c05', 'c06', 'c07', 'c08', 'c09', 'c10'];
    var xAxisDataGPS = ['g01', 'g02', 'g03', 'g04', 'g05', 'g06', 'g07', 'g08', 'g09', 'GPS0'];
    var xAxisDataGLO = ['r01', 'r02', 'r03', 'r04', 'r05', 'r06', 'r07', 'r08', 'r09', 'r10'];
    var xAxisDataGAL = ['e01', 'e02', 'e03', 'e04', 'e05', 'e06', 'e07', 'e08', 'e09', 'e10'];

    // 公共样式
    var commonOption = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: 40,
                color: '#fff' // 设置 X 轴字体颜色
            }
        },
        yAxis: {
            axisLabel: {
                color: '#ffffff' // 设置 Y 轴字体颜色
            }
        },
        series: [{
            type: 'bar',
            barWidth: '60%',
            itemStyle: {}
        }]
    };

    function changeData(type, button) {
        // 移除所有按钮的 active 类
        document.querySelectorAll('.button-group button').forEach(function (btn) {
            btn.classList.remove('active');
        });

        // 为当前点击的按钮添加 active 类
        button.classList.add('active');

        let option = JSON.parse(JSON.stringify(commonOption)); // 复制公共选项
        switch (type) {
            case 'BDS':
                option.xAxis.data = xAxisDataBDS;
                option.series[0].data = dataBDS;
                option.series[0].name = 'BDS';
                break;
            case 'GPS':
                option.xAxis.data = xAxisDataGPS;
                option.series[0].data = dataGPS;
                option.series[0].name = 'GPS';
                break;
            case 'GLO':
                option.xAxis.data = xAxisDataGLO;
                option.series[0].data = dataGLO;
                option.series[0].name = 'GLO';
                break;
            case 'GAL':
                option.xAxis.data = xAxisDataGAL;
                option.series[0].data = dataGAL;
                option.series[0].name = 'GAL';
                break;
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    // 为按钮组中的每个按钮添加点击事件监听器
    document.querySelectorAll('.button-group button').forEach(function (button) {
        button.addEventListener('click', function () {
            changeData(button.getAttribute('data-type'), button);
        });
    });

    // 默认加载BDS数据，并设置 BDS 按钮为激活状态
    document.querySelector('.button-group button:first-child').classList.add('active');
    changeData('BDS', document.querySelector('.button-group button:first-child'));

    // 使用刚指定的配置项和数据显示图表
    window.addEventListener("resize", function () {
        myChart.resize();
    });

    // 将 myChart 和 changeData 函数暴露到全局作用域
    window.myChart = myChart;
    window.changeData = changeData;
})();

//3-2 窄巷UPD
(function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('mtable3-2'));

    // X 轴数据
    var xAxisDataBDS = ['c01', 'c02', 'c03', 'c04', 'c05', 'c06', 'c07', 'c08', 'c09', 'c10'];
    var xAxisDataGPS = ['g01', 'g02', 'g03', 'g04', 'g05', 'g06', 'g07', 'g08', 'g09', 'GPS0'];
    var xAxisDataGLO = ['r01', 'r02', 'r03', 'r04', 'r05', 'r06', 'r07', 'r08', 'r09', 'r10'];
    var xAxisDataGAL = ['e01', 'e02', 'e03', 'e04', 'e05', 'e06', 'e07', 'e08', 'e09', 'e10'];

    // 公共样式
    var commonOption = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: 40,
                color: '#fff' // 设置 X 轴字体颜色
            }
        },
        yAxis: {
            axisLabel: {
                color: '#ffffff' // 设置 Y 轴字体颜色
            }
        },
        series: [{
            type: 'bar',
            barWidth: '60%',
            itemStyle: {}
        }]
    };

    function generateRandomData(length) {
        var data = [];
        for (var i = 0; i < length; i++) {
            // 生成-1到1之间的随机数，并保留三位小数
            var randomNum = (Math.random() * 2 - 1).toFixed(3);
            data.push(parseFloat(randomNum));
        }
        return data;
    }

    function changeData(type, button) {
        // 移除所有按钮的 active 类
        document.querySelectorAll('.button-group button').forEach(function (btn) {
            btn.classList.remove('active');
        });

        // 为当前点击的按钮添加 active 类
        button.classList.add('active');

        let option = JSON.parse(JSON.stringify(commonOption)); // 复制公共选项
        switch (type) {
            case 'BDS':
                option.xAxis.data = xAxisDataBDS;
                option.series[0].data = generateRandomData(xAxisDataBDS.length);
                option.series[0].name = 'BDS';
                break;
            case 'GPS':
                option.xAxis.data = xAxisDataGPS;
                option.series[0].data = generateRandomData(xAxisDataGPS.length);
                option.series[0].name = 'GPS';
                break;
            case 'GLO':
                option.xAxis.data = xAxisDataGLO;
                option.series[0].data = generateRandomData(xAxisDataGLO.length);
                option.series[0].name = 'GLO';
                break;
            case 'GAL':
                option.xAxis.data = xAxisDataGAL;
                option.series[0].data = generateRandomData(xAxisDataGAL.length);
                option.series[0].name = 'GAL';
                break;
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    // 为按钮组中的每个按钮添加点击事件监听器
    document.querySelectorAll('.button-group button').forEach(function (button) {
        button.addEventListener('click', function () {
            changeData(button.getAttribute('data-type'), button);
        });
    });

    // 默认加载BDS数据，并设置 BDS 按钮为激活状态
    document.querySelector('.button-group button:first-child').classList.add('active');
    changeData('BDS', document.querySelector('.button-group button:first-child'));

    // 定时更新数据
    setInterval(function () {
        var activeButton = document.querySelector('.button-group button.active');
        if (activeButton) {
            changeData(activeButton.getAttribute('data-type'), activeButton);
        }
    }, 5000); // 每 5 秒更新一次

    // 使用刚指定的配置项和数据显示图表
    window.addEventListener("resize", function () {
        myChart.resize();
    });

    // 将 myChart 和 changeData 函数暴露到全局作用域
    window.myChart = myChart;
    window.changeData = changeData;
})();